<template>
  <div class="box">
    <div class="box-content">
      <div class="box-content-header"></div>
      <div class="box-content-body"></div>
    </div>
  </div>
</template>

<style lang="scss">
// 拼接方式 写样式代码，减少类名长度，且优雅
.box {
  width: 200px;
  height: 200px;
  background-color: aqua;
  &-content {
    display: flex;
    // 继承整合相同样式
    &-size {
      width: 50px;
      height: 50px;
    }
    &-header {
      @extend .box-content-size;
      background-color: red;
    }

    &-body {
      @extend .box-content-size;
      background-color: yellow;
    }
  }
}
</style>